<template>
	<view class="uiwu uiwu-flex-column">
		<image src="/static/logo.png" mode="widthFix" class="uiwu-avatra" ></image>
		<view class="uiwu-title">申请获取以下权限</view>
		<view class="uiwu-tips">获得你的公开信息（昵称、头像等）</view>
		<button class="uiwu-button btn uiwu-flex uiwu-flex-center" @tap.stop="login">授权登录</button>
		<button class="uiwu-button btn1 uiwu-flex uiwu-flex-center" @tap.stop="openBack">暂不登录</button>
		<uiwu-login-info @closeChange="showPopup=false" @change="wxlogin" v-if="showPopup"></uiwu-login-info>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup:false
			};
		},
		methods:{
			openBack(){
				uni.navigateBack()
			},
			async login(){
				const { data , msg , code } = await this.uiwu.post({
					url:'account/authLoginNew',
					data:{
						code:await this.uiwu.getCode()
					}
				})
				if(!code) return this.uiwu.toast(msg)
				if(!data) return this.showPopup = true
				uni.setStorageSync('token',data.token)
				this.$store.dispatch('setUserInfo',{uiwu:this.uiwu})
				uni.navigateBack()
			},
			/**
			 * 授权回调登录
			 * @param {Object} e = {headimgurl:'用户头像',nickname:'用户昵称',code:'微信授权code'}
			 */
			async wxlogin(e){
				const { data , msg , code } = await this.uiwu.post({
					url:'account/authLogin',
					data:{...e}
				})
				if(!code) return this.uiwu.toast(msg)
				uni.setStorageSync('token',data.token)
				this.$store.dispatch('setUserInfo',{uiwu:this.uiwu})
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.uiwu{
		align-items: center;
		padding: 0 60rpx;
	}
	.uiwu-avatra{
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		margin: 117rpx 0 67rpx;
	}
	.uiwu-title{
		font-size: 36rpx;
		font-weight: bold;
		color: #181818;
		width: 100%;
		text-align: left;
		padding-top: 60rpx;
		border-top: 1rpx solid #E5E5E5;
	}
	.uiwu-tips{
		width: 100%;
		text-align: left;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		margin: 20rpx 0 150rpx;
	}
	.uiwu-button{
		width: 560rpx;
		height: 84rpx;
		line-height: 84rpx;
		border-radius: 20rpx;
		font-size: 34rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-bottom: 30rpx;
		&.btn{
			background: #07C160;
		}
		&.btn1{
			color: #07C160;
			background: #F2F2F2;
		}
	}
	
</style>
